import $ from 'jquery';
import _ from 'underscore';
import React from 'react';
import Card from 'lib/components/card.jsx';
import imgSrc from 'lib/util/ImageSource';
import CarouselModal from './CarouselModal.jsx';
import sources from './config.js';
import ThumbnialTile from './ThumbnialTile.jsx';
import { coreApi } from '../apis/core-util';
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx';
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx';
import { render } from 'react-dom';
import AllApp from '../common/apps.jsx';

class MainView extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      menu: [],
      loading: true
    };
  }

  handleMountModal(index) {
    CarouselModal.mount({
      index,
      sources: this.state.menu
    });
  }

  componentWillMount() {
    this.fetch();

    var topswitch = document.getElementById('topswitch')
    if(topswitch){
      render(
        <AllApp
          appName={BlueWare.appName}
          appId={BlueWare.appId}
          moduleName={BlueWare.module_name}/>
      ,topswitch)
    }
  }

  fetch() {
    $.ajax({
      url: `/mobile/menu/disables/${BlueWare.appId}.json`
    }).then((result) => {
      let menu = [], exists = false;

      _.forEach(result, (item, index) => {
        let pos = _.findIndex(sources, (element) => {
          return element.moduleId === item.moduleId;
        }), temp = sources[pos];

        if (_.has(temp, 'order')) {
          if (temp.group === '用户分析') {
            if (exists) {
              return false;
            }
            exists = true;
          }

          menu.push({
            order: temp.order,
            src: temp.src,
            link: temp.link,
            title: item.group === '用户分析' ? '运营' : `${item.group} - ${item.module}`,
            description: sources[pos].description
          });
        }
      });

      menu.sort((prev, next) => {
        return prev.order > next.order ? 1 : -1;
      });

      this.state.menu = menu;
    }).always(() => {
      this.setState({
        loading: false
      });
    });
  }

  render() {
    let content = (
      this.state.menu.length === 0 ? <DefaultNoDataElement /> :
        this.state.menu.map((item, index) => {
          return (
            <ThumbnialTile
              key={ index }
              name={ item.title }
              src={ item.src }
              onClick={ this.handleMountModal.bind(this, index) } />
          );
        })
    );

    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <div className="page-title">
            <h2>高级功能</h2>
          </div>
          <div className="box advanced-box">
            <Card className="widget-normal clearfix">
              <div className="float-right">
                <a href="http://www.oneapm.com/mi/price.html" target="_blank" className="btn-green">用户升级</a>
              </div>
              <h2 className="advanced-message">以下高级功能为付费用户所有，您可以进行用户升级获得它们的使用权</h2>
            </Card>
          </div>
          <div className="thumbnail-container">
            {
              this.state.loading ? <DefaultLoadingElement /> : content
            }
          </div>
        </div>
      </div>
    );
  }
}

export default MainView;
